<template>
  <div class="btn" :class="classes"><slot></slot></div>
</template>

<script>
import props from "./props";
export default {
  name: "Button",
  props,
  setup(props) {
    const classes = useClasses(props);

    return {
      classes,
    };
  },
};

const useClasses = (props) => {
  let type = "";
  if (props.outline) {
    type = `outline-${props.type}`;
  } else {
    type = props.type;
  }

  return [
    props.type ? `btn-${type}` : "",
    props.size ? `btn-${props.size}` : "",
    props.block ? "d-grid gap-2" : "",
    props.active ? "active" : "",
  ];
};
</script>